<template>
  <div class="images">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="images_header">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>素材管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="images_body">
      <div class="top">
        <div class="left">
          <span :class="{ active: isActive === 'all' }" @click="showAll">
            全部
          </span>
          <span :class="{ active: isActive === 'collect' }" @click="showCollect"
            >收藏</span
          >
        </div>
        <div class="right">
          <el-upload
            class="upload-demo"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            name="image"
            :show-file-list="false"
            :headers="{
              Authorization: `Bearer ${token}`
            }"
            :on-success="handleImagesSuccess"
          >
            <el-button size="mini" type="success">上传图片素材</el-button>
          </el-upload>
        </div>
      </div>
      <div class="bottom">
        <!-- 图片展示 -->
        <el-row class="imgRow">
          <el-col
            :span="4"
            class="imgCol"
            v-for="item in imgList"
            :key="item.id"
          >
            <img :src="item.url" alt=""/>
            <div class="img_bottom">
              <span
                :class="{ active: item.is_collected }"
                @click="collectImage(item)"
              >
                <i class="iconfont icon-collect"></i>
              </span>
              <span @click="deleteImage(item.id)">
                <i class="iconfont icon-lajixiang"></i>
              </span></div
          ></el-col>
        </el-row>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="imgTotal"
          :current-page="currentPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 导入api
import { getList, collectImage, deleteImage } from '@/api/images'
// 获取token
import { getUser } from '../../utils/storage'
export default {
  name: 'images',
  data () {
    return {
      // 当前页
      currentPage: 1,
      // 总数量
      imgTotal: 0,
      // 每页数量
      perPage: 10,
      // 图片是否是收藏的
      collect: undefined,
      // 图片列表
      imgList: [],
      token: '',
      // 当前显示图片类别
      isActive: 'all'
    }
  },
  methods: {
    // 删除图片
    async deleteImage (id) {
      const res = await deleteImage({ id })
      this.getImagesList()
      if (!(this.imgTotal / this.perPage > this.currentPage)) {
        this.currentPage--
      }
      console.log(res)
    },
    // 显示收藏图片
    showCollect () {
      this.isActive = 'collect'
      this.currentPage = 1
      this.collect = true
      this.getImagesList()
    },
    // 显示全部图片
    showAll () {
      this.isActive = 'all'
      this.currentPage = 1
      this.collect = undefined
      this.getImagesList()
    },
    // 收藏tupian
    async collectImage (item) {
      const id = item.id
      await collectImage({ id, collect: !item.is_collected })
      // 本地改变样式
      item.is_collected = !item.is_collected
      // this.getImagesList()
      // console.log(res)
    },
    // 图片上传成功
    handleImagesSuccess (res) {
      res.data.is_collected = false
      this.imgList.unshift(res.data)
      console.log(res)
      this.$message.success('文件上传成功')
    },
    // 当前页改变
    pageChange (page) {
      // console.log(page)
      this.currentPage = page
      this.getImagesList()
    },
    // 获取图片列表
    async getImagesList () {
      const res = await getList({
        per_page: this.perPage,
        page: this.currentPage,
        collect: this.collect
      })
      this.imgList = res.data.data.results
      this.imgTotal = res.data.data.total_count
    }
  },
  async created () {
    this.getImagesList()
    const user = await getUser()
    // console.log(user)
    this.token = user.token
  }
}
</script>

<style lang="less" scoped>
.images {
  width: 100%;
  background-color: #fff;
  .images_header {
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    .gt {
      margin: 0 6px;
      font-size: 12px;
      opacity: 0.5;
    }
  }
  .images_body {
    padding: 15px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .left {
        span {
          padding: 6px 15px;
          text-align: center;
          line-height: 20px;
          font-size: 12px;
          color: #ccc;
          border: 1px solid #ccc;
          cursor: pointer;
          &:first-child {
            border-radius: 3px 0 0 3px;
            border-right-color: transparent;
          }
          &:last-child {
            border-radius: 0 3px 3px 0;
            border-left-color: transparent;
          }
          &.active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
    .bottom {
      .imgCol {
        display: flex;
        flex-direction: column;
        padding: 0 5px;
        img {
          width: 100%;
          height: 99px;
        }
        .img_bottom {
          display: flex;
          justify-content: space-around;
          background-color: #b2b2b2;
          span {
            padding: 10px 0;
            font-size: 12px;
            opacity: 0.8;
            color: #fff;
            cursor: pointer;
            &.active {
              color: #f00;
            }
          }
        }
      }
    }
  }
}
</style>
